<template>
    <div style="overflow: auto;">
        帖子详情 - ID: {{ postId }}{{ postInfo }}
        <div>
            <el-carousel trigger="click" height="300px" v-if="postInfo.postType==1">
      <el-carousel-item v-for="item in postInfo.imgUrl" :key="item">
        <img :src="item" style="width: 100%;height: 100%;"></img>>
      </el-carousel-item>
    </el-carousel>
    <video v-else :src="postInfo.imgUrl[0]"  controls style="width:100%;height:100%;"></video>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getPostInfoAPI } from '../../../api/community';
import useCounter from '@/stores/pinia';
import { parseJwt } from '@/stores/pinia';
import { useRouter,useRoute } from 'vue-router';


const postInfo=ref({
    imgUrl:[]}
)
const user=ref()
const counterStore=useCounter()
const router= useRouter()
const route=useRoute()
const props = defineProps({
    postId: {
        type: Number,
        required: true
    }
});
const getPostInfo=async()=>{
    let params={
        postId:props.postId,
        userId:user.value.id
    }
    const result=await getPostInfoAPI(params)
    postInfo.value=result.data.data
    getLinkData(postInfo.value.imgUrl)
}

const getLinkData = (imgList) => {
  try {
    if (!imgList) return []
    const jsonString = imgList.replace(/'/g, '"');
    const imgList1 = JSON.parse(jsonString);
    // const data = typeof imgList === 'string' ? JSON.parse(imgList) : imgList;

    postInfo.value.imgUrl=imgList1
  } catch (error) {
    console.error('imgList:', error);
    postInfo.value.imgUrl=[]
  }
}
onMounted(()=>{
      if(counterStore.jwt){
    user.value=parseJwt(counterStore.jwt)
    getPostInfo()

  }else{
    router.push('/')
  }
})

</script>